<template>
  <a-carousel class="carousel-card" :autoplay="autoplay">
    <div class="carousel-card-item" v-for="(item, index) in list" :key="index" :class="item.class" @next="next(item, index)" @prev="prev(item, index)">
      {{item.url}}
    </div>
  </a-carousel>
</template>

<script>

import {
  Carousel,
} from 'ant-design-vue'

export default {
  name: 'swiper-card',
  components: {
    [Carousel.name]: Carousel
  },
  props: {
    autoplay: {
      type: Boolean,
      default: false
    },
    list: Array,
  },
  data() {
    return{}
  },
  mounted() {},
  methods: {
    animateClass(item, index) {
      item.class = 'card-flipout'
      this.list[index].class = 'card-flipin'
    },
    next(item, index) {
      if(index < this.list.length - 1){
        this.animateClass(item, index + 1);
      }
    },
    prev(item, index){
      if(index > 0){
        this.animateClass(item, index - 1);
      }
    }
  }
}
</script>

<style lang="less">
@keyframes flipout {
  0% {
    transform-origin : 0 100% 0 rotateY(0deg);
    opacity: 1;
  }
  30% {
    transform-origin : 0 100% 0 rotateY(45deg);
    opacity: 1;
  }
  to {
    transform-origin : 0 100% 0 rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipin {
  0% {
    transform-origin : 0 100% 0 rotateY(90deg);
    opacity: 0;
  }
  30% {
    transform-origin : 0 100% 0 rotateY(45deg);
    opacity: 1;
  }
  to {
    transform-origin : 0 100% 0 rotateY(0deg);
    opacity: 1;
  }
}

.carousel-card {
  .carousel-card-item {
    &.card-flipout {
      animation-name: flipout;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-iteration-count: infinite;
    }
    &.card-flipin {
      animation-name: flipin;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-iteration-count: infinite;
    }
  }
}
</style>